<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.web{
				height: 1300px;
				background: linear-gradient(green,yellow);
			}
			.content{
				width:148.66px;
				height: 200px;
				overflow: hidden;
				position: absolute;
				bottom: -200px;
    			right: 150px;
			}
			.rock{
				width: 148.66px;
				height: 200px;
				background: url(img/rocket.png);
			}
			.rock:hover{
				width: 148.66px;
				background: url(img/rocket.png) -148.66px 0;
			}
			.rocket{
				width: 148.66px;
				height: 200px;
				animation: rocket steps(1,start) .1s infinite;
				display: none;
			}
			@keyframes rocket{
				0%{
					transform: translate(0,0);
				}
				10%{
					transform: translate(-148.66px,0);
				}
				20%{
					transform: translate(-148.66px,0);
				}
				30%{
					transform: translate(-297.32px,0);
				}
				40%{
					transform: translate(-297.32px,0);
				}
				50%{
					transform: translate(-445.98px,0);
				}
				60%{
					transform: translate(-445.98px,0);
				}
				70%{
					transform: translate(-594.64px,0);
				}
				80%{
					transform: translate(-594.64px,0);
				}
				90%{
					transform: translate(-743.3px,0);
				}
				100%{
					transform: translate(-743.3px,0);
				}
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="content">
				<div class="rocket">
					<img src="img/rocket.png"/>
				</div>
				<div class="rock"></div>
			</div>
		</div>
		
		
		<script src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			$("html").animate({
					"scrollTop":`1000px`
				})
			$(document).ready(()=>{
				$(document).scrollTop();
			})
			$(".rock").on("click",function(){
				$(".rocket").css("display","block");
				$(".content").animate({
					"bottom":"1100px",
				},500,function(){
					$(".content").css("bottom","-200px");
					$(".rocket").css("display","none")
				})
				$("html").animate({
					"scrollTop":`0px`
				},400,function(){
					$("html").animate({
						"scrollTop":`1000px`
					})
				})
			})
			
		</script>
	</body>
</html>
